<template>
  <div>
    <el-divider content-position="left">
      <el-switch
        v-model="type"
        active-text="收入"
        inactive-text="支出"
      />
    </el-divider>
    <el-row>
      <el-col
        :span='6'
        style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
      >
        <el-form
          label-position="left"
          size="mini"
          ref="form"
          :model="form"
          label-width="40px"
        >
          <el-form-item label="花费">
            <el-input
              v-model="form.cost"
              autofocus
              @keyup.enter="doFocus('category')"
            ></el-input>
          </el-form-item>
          <el-form-item label="大类">
            <el-input
              v-model="form.category"
              @keyup.enter="doFocus('secondCategory')"
              ref="category"
            ></el-input>
          </el-form-item>
          <el-form-item label="子类">
            <el-input
              v-model="form.secondCategory"
              @keyup.enter="doFocus('tag')"
              ref="secondCategory"
            ></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="标签">
            <el-input
              @keyup.enter="doFocus('remark')"
              v-model="form.tag"
              ref="tag"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              @keyup.enter="insert(form)"
              v-model="form.remark"
              ref="remark"
            ></el-input>
          </el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="insert(form)"
          >立即创建</el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
axios.get("http://localhost:8080/selectList").then((res) => {
  console.log(res.data);
});
export default {
  data() {
    return {
      type: false,
      form: {
        category: "",
        secondCategory: "",
        cost: "",
        date: new Date(),
        type: "",
        tag: "",
        remark: "",
      },
    };
  },
  methods: {
    insert(data) {
      data.type = this.type ? "income" : "outcome";
      console.log(data);
      // axios({
      //   method: "post",
      //   url: "http://localhost:8080/insert",
      //   data: data,
      // });
    },
    doFocus(target) {
      this.$refs[target].focus();
    },
  },
};
</script>
